<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>
    用户名：<input type="text" id="username" placeholder="请输入2-8位中文名称"><br>
    <span id="tip"></span>
</div>
<style>
    .right{
        color: green;
        font-size: 14px;
    }
    .wrong{
        color: red;
        font-size: 14px;
    }
</style>
<script>
    const username = document.querySelector('#username')
    const tip = document.querySelector('#tip')
    const reg = /^[\u4e00-\u9fa5]{2,8}$/;

    username.addEventListener('blur',function(){
        const value = this.value.trim();
        if(reg.test(value)){
            tip.className = 'right';
            tip.textContent = '昵称正确';
        }else{
            tip.className = 'wrong'
            tip.textContent = '昵称错误，请输入2-8位中文昵称'
        }
    });
</script>
</body>
</html>